<template>

  <div class="login" id="login">

    <div class="login-header">
      <div class="login-header-con">
        <img src="../header/logo.png"/>
        <div class="login-title">高考志愿填报系统 专家版</div>
      </div>
    </div>

    <div class="login-form">
      <img class="photo pull-left" src="./login-teacher.png"/>
      <div class="login-email pull-left">
        <div class="login-info m-t-20 clearfix">
          <div class="user-icon pull-left">
            <span class="glyphicon glyphicon-user"></span>
          </div>
          <div class="login-input pull-left">
            <input type="text" v-model="username" placeholder="请输入用户名"/>
          </div>
        </div>
        <div class="login-info m-t-20 clearfix">
          <div class="user-icon pull-left">
            <!--<span class="glyphicon glyphicon-user"></span>-->
            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
          </div>
          <div class="login-input pull-left">
            <input type="password" v-model="password" placeholder="请输入密码"/>
          </div>
        </div>
        <!--<div class="login-info m-t-20">错误信息</div>-->
        <div class="m-t-20 login-btn">
          <div class="md-btn" @click="login">确认登录</div>
        </div>
      </div>
    </div>

    <div class="footer">
      <span>门道中学生生涯规划指导专家</span>
      <span>|</span>
      <span>你与更精彩的自己，只差一道门的距离！</span>
    </div>
    <!--<Loading v-if="isLoging" marginTop="-30%"></Loading>-->
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      return {
        isLoging: false,
        username: '',
        password: ''
      };
    },
    methods: {
      // 登录逻辑
      login() {
        if (this.username !== '' && this.password !== '') {
          this.toLogin();
        }
      },

      // 登录请求
      toLogin() {
        // 一般要跟后端了解密码的加密规则
        // 这里例子用的哈希算法来自./js/sha1.min.js
        // let passwordSha = hex_sha1(hex_sha1(this.password));
        // let passwordSha = this.password;
        // 需要想后端发送的登录参数
        // let loginParam = {
        //   username: this.username,
        //   password: this.password
        // };
        let params = new URLSearchParams();
        params.append('username', this.username);
        params.append('password', this.password);
        // 请求后端,比如:
        this.$http.post(this.HOST + 'mendao/login', params).then((response) => {
          if (response.data.code == 1) {
            let expireDays = 1000 * 60 * 60 * 24 * 15;
            this.setCookie('session', response.data.data.username, expireDays);
            // 设置在登录状态
            this.isLoging = false;
            // 登录成功后
            this.$router.push({
              path:'/schoolInfo/',
              query: {
                username: this.username,
                createdUser: response.data.data.id
              }
            });
          }
        }, (response) => {
        });
      }
    }
  };
</script>

<style scoped>
  .login-header {
    width: 100%;
    height: 82px;
    position: absolute;
    top: 0;
    background-color: #E65A1E;
  }

  .login-header .login-header-con {
    width: 1190px;
    height: 82px;
    margin: 0 auto;
    text-align: center;
  }

  .login-header .login-header-con img {
    width: 95px;
    margin-top: -20px;
    display: inline-block;
  }

  .login-header .login-header-con .login-title {
    height: 82px;
    line-height: 82px;
    margin-left: 20px;
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    display: inline-block;
  }

  .login-form {
    width: 790px;
    height: 280px;
    position: absolute;
    top: 50%;
    margin-top: -140px;
    left: 50%;
    margin-left: -395px;
    text-align: center;
  }

  .login-form .photo {
    width: 280px;
    height: 280px;
  }

  .login-form .login-email {
    width: 490px;
    height: 280px;
    margin-left: 20px;
    border-radius: 4px;
    background-color: #ebebeb;
    padding: 40px;
  }

  .login-info {
    height: 45px;
    padding-left: 62px;
  }

  .login-info .user-icon {
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background-color: #ddd;
  }

  .login-input {
    height: 45px;
    border-top: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
  }

  .login-input input {
    width: 240px;
    height: 43px;
    line-height: 43px;
    padding: 0 10px;
    outline: none;
  }

  .login-btn {
    width: 100%;
    text-align: center;
  }

  .login-btn .md-btn {
    width: 150px;
    padding: 6px 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 25px;
    margin: 0 auto;
    background: #E65A1E;
    cursor: pointer;
  }

  .m-t-10 {
    margin-top: 10px;
  }

  .m-t-20 {
    margin-top: 20px;
  }

  .footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    text-align: center;
    background: #E65A1E;
    font-size: 12px;
    color: #fff;
  }

</style>
